<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品添加页面</title>
    <script src="/js/jquery-3.2.0.min.js"></script>
    <script src="/js/app.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/default.js"></script>
    {{--<script src="/js/jquery.uploadView.js"></script>--}}
    <!-- Fonts -->
    {{--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>--}}
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">
    <link href="/css/webuploader.css" rel="stylesheet">
    <script src="/js/webuploader.js"></script>
    <style>
        body {
            font-family: 'Lato';
        }
        .fa-btn {
            margin-right: 6px;
        }
        .flashy {
            font-family: "Source Sans Pro", Arial, sans-serif;
            padding: 11px 30px;
            border-radius: 4px;
            font-weight: 100;
            position: fixed;
            bottom: 20px;
            right: 20px;
            font-size: 12px;
            color: #fff;
        }
        .navbar-nav li{
            float: left ; width: 50px;
        }
        .tianjia {
            width: 100%;  height: 50px;cursor:pointer; background-color: #ffffff; text-align: left; padding-left: 15px;font-weight: bold;
        }
        .files{
            position:absolute; left:202px; top:52px; heigth:26px;cursor:pointer;
            filter: Alpha(opacity=0);
            -moz-opacity:0;
            opacity:0;
        }
        #show img{
            width: 100px;
            height: 100px;;
        }
        #show p {float: left;}
        /* .uploadify-queue{ display: none;
         }*/

        .sc_file  input{
            float: left;
        }
        #upload_file input{
            float: left;
        }
        #box{ margin:50px auto; width:30%; min-height:400px; background:#ff9}


        .upload-input { position: absolute; overflow: hidden; }
        .upload-html4 { position: absolute; left: -10000px; top: -10000px; }

        .u-loaded { color: green; }
        .u-total { color: #FC5900; }
    </style>
</head>
<body id="app-layout">
<div class="" style="min-height:1000px; background-color: #efefef; border: none;">
    <form class="form-horizontal"  role="form"  method="post" action="{{ url('/goods/save') }}">
        <nav class="navbar navbar-default" role="navigation" style="margin-bottom: 0;">
            <div class="navbar-header" style="float: left;">
                <a class="navbar-brand" href="#">《</a>
            </div>

            <div class=" navbar-collapse" id="bs-example-navbar-collapse-1" style="float: left;">
                <ul class="nav navbar-nav" style= "width: 300px;">
                    <li class="" style="width: 80%; text-align: center;">
                        <a href="#">添加商品</a>
                    </li>
                    <li class="" style="width: 20%; text-align: center; height: 40px; line-height: 40px;">
                        <button type="submit" class="btn btn-default" style="border: none;background-color:#f8f8f8;" onclick="this.form.submit()">保存</button>
                    </li>

                </ul>
            </div>
        </nav>
        <div class="" style="line-height:50px;height: 50px; padding-left: 15px; border: none; font-weight: bold; ">请填写基本资料</div>
        <div class="container" style="margin-top: 0px; background-color: #ffffff;">

            <div class="form-group" style="border-bottom: 1px solid #efefef ;">
                <label for="firstname" class="col-sm-2 control-label" style="float: left; height: 50px; line-height: 50px;">品牌名称</label>
                <div class="col-sm-10" style="float: left; width: 70%">
                    <input type="text" name="brand"  id="brand" onblur="checkblur()" class="form-control" style="height: 50px; line-height: 50px; border: none;"  placeholder="请填写您的品牌名称">
                </div>
            </div>
            <div class="form-group" style="border-bottom: 1px solid #efefef ;">
                <label for="firstname" class="col-sm-2 control-label" style="float: left; height: 50px; line-height: 50px;">商品名称</label>
                <div class="col-sm-10" style="float: left; width: 70%">
                    <input type="text" name="title"  id ="title" onblur="checkblur()" class="form-control" style="height: 50px; line-height: 50px; border: none;" id="firstname" placeholder="请填写您的服装名称">
                </div>
            </div>
            <div class="form-group" style="border-bottom: 1px solid #efefef ;">
                <label for="firstname" class="col-sm-2 control-label" style="float: left; height: 50px; line-height: 50px;">商品价格</label>
                <div class="col-sm-10" style="float: left; width: 70%">
                    <input type="text"  name="produc_val"  class="form-control" style="height: 50px; line-height: 50px; border: none;" id="produc_val" placeholder="请填写商品价格">
                </div>
            </div>
            {{--<div class="form-group" style="border-bottom: 1px solid #efefef ;">
                <div class="col-sm-10" style=" padding-left: 100px;">
            <div id="uploader-demo">
                <div id="fileList" class="uploader-list"></div>
                <div id="filePicker">选择商品图片</div>
            </div>
                    <div class="upload_newimg"></div>
                    <div class="file_error" style="color: red"></div>
                    <div class="file_complete" style=" display: none;">上传完成</div>
                </div>
                </div>--}}

            <div class="form-group" style="border-bottom: 1px solid #efefef ;">
                <div id="uploader-demo">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list" style="float:left; margin-right: 10px;">
                    </div>
                    <div id="filePicker" style="float:left;">选择图片</div>
                </div>
            </div>
            <div class="form-group" id="wsgoodsinfo">
                <label for="lastname" class="col-sm-2 control-label" style="height: 50px; line-height: 50px; float: left;">完善商品信息</label>
                <div class="navbar-header" style="float: right;">
                    <a class="navbar-brand" href="#" style="color:#000000;">》</a>
                </div>
            </div>
            <input type="hidden" name="merchant_id" value="1">
            <input type="hidden" name="describe" value="1111111111111">
            <input type="hidden" id="brand_h" value="">
            <input type="hidden" id="title_h" value="">
            <input type="hidden" name="goodsid" id="goodsid" value="">

        </div>
    </form>
    {{--<div class="container" style="margin-top: 0px; background-color: #ffffff;" id ="upload_file">
        <form action="{{ url('/goods/upload') }}" name="form" method="post" enctype="multipart/form-data">
            <input type="file" name="file" />
            <input type="submit" name="submit" value="上传" />
            <input type="hidden" name="goodsid" id="goodsid" value="">
        </form>
    </div>--}}
    {{--<div style="width: 100%" class="sc_file">
         <input type="file" class="file" id="img_url" name="image_data[]" value="dff" accept="image/*" multiple style="width: 20%">
         <input type="button" name="upload_btn" id = "upload_btn" class="btn btn-default" style="border-radius:10px 10px 10px 10px;background-color: #a7a7a7; width: 50%;" onclick="upload()" value="上传" >
     </div>--}}


</div>
</body>
<meta name="csrf_token" id="token" content="{{ csrf_token() }}">
<!-- JavaScripts -->
<script type="text/javascript">
    function checkblur() {
        $("#brand").blur(function () {
            brandvalue = $("#brand").val();
            brand_h = $("#brand_h").val(brandvalue);
        });
        $("#title").blur(function () {
            titlevalue = $("#title").val();
            title_h = $("#title_h").val(titlevalue);
        });
    }
    $(document).ready(function() {
        $("#brand").blur(checkblur());
        $("#title").blur(checkblur());
        $("#produc_val").blur(function(){
            produc_val = $("#produc_val").val();
            $.ajax({
                type: "POST",
                dataType: 'json',
                url: "/goods/ajax_data_goods",
                async:true  ,
                data: {brand:$("#brand_h").val() , title:$("#title_h").val() , produc_val:produc_val ,describe:$("#title_h").val() },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function (dataObj) {
                    for(var i in dataObj) {
                        for (var k in dataObj[i])
                            $("#goodsid").val(dataObj[i][k]);
                        // $(".webuploader-element-invisible").append("<input type='hidden' name='goodsid' id='goodsid' value="+dataObj[i][k]+" >");

                    }
                    /*$.each(dataObj,function(i,item){
                     });*/
                },
                error: function (XMLHttpRequest, textStatus) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                    alert(textStatus);
                }
            });
        });
    });
    $("#upload_btn").click(function(){
        // alert($("#img_url").val());
        var img_url = $("#img_url").val();

        $.ajax({
            type: "POST",
            dataType: 'text',
            url: "/goods/upload",
            data: {img_url: img_url , goodsid : $("#goodsid").val() },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            success: function (data) {
                // location.reload();
                // alert(data);
                alert('上传成功!');
            },
            error: function (XMLHttpRequest, textStatus) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
                alert(textStatus);
            }
        });
    });

</script>
<script type="text/javascript">
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        // swf:  '{{ url('/js/uploadify.swf') }}' ,

        // 文件接收服务端。
        server: '{{ url('/goods/upload') }}',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        fileNumLimit : 3 ,
        fileSizeLimit : 5000000*1024 ,
        fileSingleSizeLimit : 5000*1024 ,
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }


    });
    /*uploader.on( 'uploadSuccess', function( file ) {
     //alert(file);
     for(var i in file){
     alert(file[i]);

     }
     });*/

    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail" style="float:left;margin-right:10px;">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                        '</div>'
                ),
                $img = $li.find('img');
        var $list=$('#fileList');
        $list.append( $li );
        var thumbnailWidth = 100;
        var thumbnailHeight = 100;
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });

    /*uploader.on( 'uploadProgress', function( file, percentage ) {
     var $li = $( '#'+file.id ),
     $percent = $li.find('.progress span');
     if ( !$percent.length ) {
     $percent = $('<p class="progress"><span></span></p>')
     .appendTo( $li )
     .find('span');
     }

     $percent.css( 'width', percentage * 100 + '%' );
     });*/
    ;    uploader.on( 'uploadSuccess', function( file,res ) {
        $('#uploader-demo').append('<input type="hidden" name="file_arr[]" value="'+res.filePath+'">');
        $( '#'+file.id ).addClass('upload-state-done');

    });
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
                $error = $li.find('div.error');
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }
        $error.text('上传失败');
    });
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });

</script>
</html>
